<template>
    <el-upload action="#" list-type="picture-card" :auto-upload="false" class="uploudwaper" v-bind="$attrs">
      <el-icon><Plus /></el-icon>
      <template #file="{ file }">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <el-icon><zoom-in /></el-icon>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <el-icon><Download /></el-icon>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <el-icon><Delete /></el-icon>
            </span>
          </span>
        </div>
      </template>
    </el-upload>
  
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
  import type { UploadFile } from 'element-plus'
  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  const disabled = ref(false)
  // 定义 props
  const props = defineProps({
    style: String
  });

// 定义 emits
const emits = defineEmits(['update:message']);


// 定义方法
const updateMessage = () => {
  message.value = 'Updated message';
  emits['update:message'](message.value);
};

  const handleRemove = (file: UploadFile) => {
    console.log(file)
  }
  
  const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
  }
  
  const handleDownload = (file: UploadFile) => {
    console.log(file)
  }
  </script>
  <style scoped lang="scss">
  .uploudwaper{
    margin-right: 18px;
  }
</style>